<template>
  <div>
    <!-- 搜索卡片区 -->
    <el-card class="box-card">
      <!-- 命名插槽，头部内容 -->
      <div slot="header" class="clearfix">
          <span>图片管理</span>
          <!-- <el-button style="float: right" type="primary" @click='upImage'>上传图片</el-button> -->
          <!-- headers:报401错误,要给上传组件内部的ajax设置请求头协议信息，包括token，会报400错误 -->
          <!-- 上传的文件字段名为file，但接口文档要求我们的字段名name为image)-->
          <el-upload
           style="float: right" type="primary"
            action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
            :show-file-list='false'
            :headers="setToken"
            name="image"
            :on-success="onSuccess"
            >
            <el-button style="float: right" type="primary">点击上传</el-button>
          </el-upload>
      </div>
      <!-- 匿名插槽，内容主体 -->
      <div class="text item">
        <ul>
        <li class="image-box" v-for="item in imageList" :key="item">
          <img :src="item.url" alt>
          <div class="image-bot">
            <el-button type="success" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </div>
        </li>
      </ul>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Material',
  created () {
    this.getImageList()
  },
  computed: {
    setToken () {
      let token = JSON.parse(window.sessionStorage.getItem('userinfo')).token
      return { Authorization: 'Bearer ' + token }
    }
  },
  data () {
    return {
      imageList: [],
      queryData: {
        collect: false,
        page: 1,
        per_page: 20
      }
    }
  },
  methods: {
    // 上传图片成功后的操作
    onSuccess () {
      this.$message.success('图片素材上传成功')
      this.getImageList()
    },
    // 获取素材列表
    getImageList () {
      let pro = this.$http.get('/user/images', { params: this.queryData })
      pro
        .then(result => {
          // console.log(result)
          this.imageList = result.data.data.results
        })
        .catch(err => {
          return this.$message.error('获取图片素材失败:' + err)
        })
    }
  }
}
</script>

<style lang='less' scoped>
  // 素材图片列表样式
.image-box {
  list-style: none;
  width: 200px;
  height: 200px;
  background-color: #fff;
  margin: 10px;
  float: left;
  border: 1px solid #eee;
  img {
    width: 200px;
    height: 140px;
  }
  .image-bot {
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
}
</style>
